
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="static/image/favicon.ico">
	<style>
		.w20{width:20%;margin-left: auto;margin-right: auto;}
		.align-center{position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;} 
	</style>
    <title>Login</title>
    <!-- Bootstrap core CSS -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body background="static/image/bg.jpg">
	{% raw xsrf_form_html() %}
    <div class="container">
      <div class="w20 align-center">
        <h2>Please sign in</h2>
        <input type="text" id="username" class="form-control" required autofocus>
		<br />
        <input type="password" id="password" class="form-control" placeholder="Password" required>
		<br />
        <button class="btn btn-lg btn-primary btn-block" id="loginbtn">登入</button>
      </div>
    </div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$("#loginbtn").click(function(){
var xsrf=$.cookie("_xsrf");
if ($("#username").val()=="" || $("#password").val()=="")
{
	alert("用户名和密码不能为空！");
} else {
		$.post("login",{username:$("#username").val(),password:$("#password").val(),_xsrf:xsrf},function(data){
			if(data=="1"){location.reload();} else {alert("登入失败，请检查你的用户名和密码！")}
			})
		}
})
</script>
  </body>
</html>
